<template>
    <Drawer v-model:visible="isShowDrawer" title="详情" :loading="loading" :width="800" :closable="false"
        :bodyStyle="{ padding: 0 }">
        <template #extra>
            <CloseOutlined @click="handleCancel" />
        </template>
        <Spin :spinning="loading" wrapperClassName="enterprise-spin">
            <div class="flex flex-col h-full" v-if="agencyData">
                <div class="flex flex-row items-center p-6">
                    <Image :src="agencyData.logo || '/resource/images/default-agency-logo.png'" :preview="false"
                    class="min-w-20 min-h-20 !w-20 !h-20 !border border-[#eee]" />
                    <div class="flex flex-col flex-1 ml-5">
                        <span class="text-[#333] font-bold text-2xl">{{ agencyData.fullName }}</span>
                        <span class="text-[#999] text-xs mt-1">{{ agencyData.companyScale || '--' }}</span>
                    </div>
                    <div class="flex flex-row gap-4">
                        <div class="flex flex-col items-center">
                            <span class="text-xl text-[#0960bd]">{{ agencyData.userCount }}</span>
                            <span>成员数</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-xl text-[#0960bd]">{{ agencyData.lastLoginTime ?? '--'
                                }}</span>
                            <span>最近登录</span>
                        </div>
                    </div>
                </div>
                <Tabs v-model:activeKey="activeKey" class="!px-4 h-[46px] min-h-[46px]">
                    <TabPane :key="1" tab="成员管理"></TabPane>
                    <TabPane :key="2" tab="资料设置"></TabPane>
                </Tabs>

                <div class="px-4 pb-4 bg-[#f5f7fa] flex-1">
                    <div class="flex flex-col" v-if="activeKey === 1">
                        <div class="mt-3 flex justify-end">
                            <Button type="primary" class="!flex flex-row items-center" @click="handleUser()">
                                <template #icon>
                                    <PlusOutlined class="!flex" />
                                </template>
                                添加成员
                            </Button>
                        </div>
                        <div v-if="userList?.length === 0" class=" p-8 my-4 bg-white text-center">暂无成员</div>
                        <div class="flex flex-col items-start rounded p-4 my-4 bg-white"
                            v-if="userList?.find(v => v.isAdmin)">
                            <span class="text-lg font-bold mb-2">管理员</span>
                            <template v-for="item in userList" :key="item.id">
                                <div v-if="item.isAdmin"
                                    class="flex flex-row justify-between items-center w-full border-b border-[#eee] py-4 last:border-none">
                                    <Image v-if="item.head" :src="item.head" style="width: 48px;height: 48px;"
                                        class="flex rounded-full border" :preview="false">
                                    </Image>
                                    <div v-else
                                        class="w-12 h-12 bg-[#0960bd] text-white flex items-center justify-center text-xl font-bold rounded">
                                        {{ item.name?.slice(0, 1) }}</div>
                                    <div class="flex flex-col flex-1 ml-4">
                                        <span class="text-base font-bold">{{ item.name }}</span>
                                        <span class="text-sm text-[#666]">{{ item.mobile }}</span>
                                    </div>
                                    <span v-if="item.lastLoginTime" class="text-[#666] w-[200px]">最近登录 {{
                                        item.lastLoginTime }}</span>
                                    <div class="flex flex-row gap-2">
                                        <Popconfirm title="确定解绑吗?" ok-text="确认" cancel-text="取消"
                                            @confirm="handleDel(item.id)">
                                            <Button type="primary" ghost>解绑</Button>
                                        </Popconfirm>
                                        <Button type="primary" ghost @click="handleUser(item)">编辑</Button>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="flex flex-col items-start rounded p-4 bg-white"
                            v-if="userList?.find(v => !v.isAdmin)">
                            <span class="text-lg font-bold mb-2">普通成员</span>
                            <template v-for="item in userList" :key="item.id">
                                <div class="flex flex-row justify-between items-center w-full border-b border-[#eee] py-4 last:border-none "
                                    v-if="!item.isAdmin">
                                    <Image v-if="item.head" :src="item.head" style="width: 48px;height: 48px;"
                                        class="flex rounded-full border" :preview="false">
                                    </Image>
                                    <div v-else
                                        class="w-12 h-12 bg-[#0960bd] text-white flex items-center justify-center text-xl font-bold rounded">
                                        {{ item.name?.slice(0, 1) }}</div>
                                    <div class="flex flex-col flex-1 ml-4">
                                        <span class="text-base font-bold">{{ item.name }}</span>
                                        <span class="text-sm text-[#666]">{{ item.mobile }}</span>
                                    </div>
                                    <span v-if="item.lastLoginTime" class="text-[#666] w-[200px]">最近登录 {{
                                        item.lastLoginTime }}</span>
                                    <div class="flex flex-row gap-2">
                                        <Popconfirm title="确定解绑吗?" ok-text="确认" cancel-text="取消"
                                            @confirm="handleDel(item.id)">
                                            <Button type="primary" ghost>解绑</Button>
                                        </Popconfirm>
                                        <Button type="primary" ghost @click="handleUser(item)">编辑</Button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div v-if="activeKey === 2" class="flex flex-col mt-4 p-4 bg-white">
                        <div class="flex flex-row justify-between items-center">
                            <span class="text-lg font-bold mb-2">资质认证</span>
                            <FormOutlined class="text-xl !text-[#0960bd]" @click="handleEnterprise(agencyData)" />
                        </div>
                        <div class="flex flex-col gap-3 text-[#666]">
                            <div class="flex flex-row items-center gap-3">
                                <span class="text-[#333]">认证主体： </span>
                                <span>{{ agencyData.fullName }}</span>
                                <span v-if="agencyData.state === 0"
                                    class="text-[#0960bd] border border-[#0960bd] rounded-full px-2 text-xs ml-2">已认证</span>
                                <span v-else
                                    class="text-[#ff4d4f] border border-[#ff4d4f] rounded-full px-2 text-xs ml-2">未认证</span>
                            </div>
                            <div class="flex flex-row items-center gap-3">
                                <span class="text-[#333]">信用代码： </span>
                                <span>{{ agencyData.usci || '--' }}</span>
                            </div>
                            <div class="flex flex-row items-center gap-3">
                                <span class="text-[#333]">认证时间： </span>
                                <span>{{ convertTime(agencyData.auditTime) || '--' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Spin>
        <AddUserModal ref="addRef" @ok="GetCompanyUser" />
        <AddEnterpriseModal ref="addEnterPriseRef" @ok="emit('ok')" />
    </Drawer>
</template>

<script lang="ts" setup>
import { Drawer, message, Image, Button, Popconfirm, Spin, Tabs } from 'ant-design-vue'
import { CloseOutlined, PlusOutlined, FormOutlined } from '@ant-design/icons-vue'
import { CompanyApi, CompanyQueryResult, UserSearchResult } from '@/api';
import AddUserModal from "./AddUserModal.vue";
import AddEnterpriseModal from './AddEnterpriseModal.vue';
import { convertTime } from '@/utils/queryConversion';

const emit = defineEmits(['ok']);

const TabPane = Tabs.TabPane;

const addRef = ref();
const isShowDrawer = ref(false)
const loading = ref(false)
// 成员列表
const userList = ref<UserSearchResult[]>()
const EditId = ref();
// 企业data
const agencyData = ref<CompanyQueryResult>()
const activeKey = ref(1);
// 添加企业
const addEnterPriseRef = ref();

const handleOpen = (data: CompanyQueryResult) => {
    handleEmpty();

    EditId.value = data.id;
    if (data) {
        agencyData.value = data;
    }
    GetCompanyUser();
    isShowDrawer.value = true;
}

// 获取成员
const GetCompanyUser = async () => {
    loading.value = true;
    try {
        let res = await CompanyApi.companyCompanyuserlist(EditId.value);
        userList.value = res;
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }
}

const handleEmpty = () => {
    activeKey.value = 1;
    EditId.value = undefined;
    agencyData.value = undefined;
}

function handleClose() {
    isShowDrawer.value = false;
}

function handleCancel() {
    handleEmpty();
    handleClose();
}

// 添加成员
const handleUser = (user?: CompanyQueryResult) => {
    if (user) {
        addRef.value.handleOpen({ isEdit: true, id: agencyData.value?.id, user });
    } else {
        addRef.value.handleOpen({ isEdit: false, id: agencyData.value?.id });
    }
}

// 删除成员
const handleDel = async (id: any) => {
    loading.value = true;
    try {
        await CompanyApi.companyCompanyuserdelete(id);
        message.success('删除成功')
        GetCompanyUser()
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }
}

// 企业认证
function handleEnterprise(data: CompanyQueryResult) {
    addEnterPriseRef.value.handleOpen(data);
}

defineExpose({ handleOpen })
</script>
<style lang="less" scoped>
.enterprise-spin {
    height: 100%;

    :deep(.ant-spin-container) {
        height: 100%;
    }
}
</style>